<!DOCTYPE html>

<html ng-app="DashPlayer" lang="en">

    <head>

		<meta charset="utf-8"/>
		<link rel="stylesheet" href="app/lib/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="app/lib/bootstrap/css/bootstrap-theme.css">
		<link rel="stylesheet" href="app/lib/bootstrap/css/bootstrap-glyphicons.css">
		<link rel="stylesheet" href="app/css/main.css">
		<link rel="stylesheet" href="app/contrib/akamai/controlbar/controlbar.css">
		<title>网络内容分发分析仿真平台</title>

		<script src="app/lib/jquery/jquery-3.1.1.min.js"></script>

		<script src="app/lib/angular/angular.min.js"></script>
		<script src="app/lib/angular/angular-resource.min.js"></script>
		<script src="app/lib/angular/angular-flot.js"></script>

		<link rel="shortcut icon" type="image/x-icon" href="./favicon/favicon.ico" />
<!--		&lt;!&ndash; 引入样式 &ndash;&gt;-->
<!--		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--		&lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--		<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->




		<script src="app/lib/bootstrap/js/bootstrap.min.js"></script>

		<script src="app/lib/flot/jquery.flot.min.js"></script>
		<script src="app/lib/flot/jquery.flot.resize.min.js"></script>
		<script src="app/lib/flot/jquery.flot.axislabels.js"></script>

		<script src="app/contrib/cast_sender.js"></script>
		<script src="app/contrib/akamai/controlbar/ControlBar.js"></script>

		<script src="./dash.js/dist/dash.all.debug.js"></script>

		<script src="app/main.js"></script>
		<!-- <script src="aframe/dist/aframe-master.js"></script> -->


		<script src="FOVRule.js" class="code"></script>
		<script src="MyThroughputRule.js" class="code"></script>
		<script src="HighestBitrateRule.js" class="code"></script>
		<script src="FOVContentRule.js" class="code"></script>

		<script>
			//// TODO:
			// 1. Total QoE / Viewer's QoE / Content-based QoE
			// 2. Content-based ABR
			// 3. Popularity-based ABR (MEC later)
			// 3. Aframe assets on demands
			// 4. Tiles sync
			// 5. ERP to CMP optimization
			// 6. Rendering
			// 7. Visual UI
			// 8. QUIC/WebRTC
			// 9. MEC
			// 10. Audio codec

			// setInterval(function () {
			// 	console.log("localhost:", localStorage.getItem('md'));
			// }, 1000);
		</script>

		<style>
			body {
				background-color: #ececec;
				min-width: 1000px;
				overflow-x: hidden;
			}
		</style>

	</head>

    <body ng-controller="DashController">
		<div class="container">
			<div class="row title-header">
				<div class="branding">
					<span id="big-title" style="letter-spacing: 1px">
						<i class="el-icon-video-camera-solid"></i> 网络内容分发分析仿真平台
					</span>
				</div>
			</div>

			<div class="row">
				<div class="input-group">
					<div id="desktop-streams" class="input-group-btn">
						<button type="button" class="btn btn-group-justified dropdown-toggle" data-toggle="dropdown">
							网络流 <span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
							<li ng-repeat="item in availableStreams" class="ng-scope" ng-mouseover="onStreamItemHover(item)"><a class="ng-binding" ng-click="setStream(item)">{{item.name}}</a></li>
						</ul>
					</div>
					<input type="text" style="font-family: 'Comic Sans MS'" class="form-control" ng-model="selectedItem.value" ng-change ="changeStream()">
					<span class="input-group-btn">
						<button class="btn btn-info" ng-click="showoption()" ng-cloak>{{optionButton}}</button>
						<button class="btn btn-info" type="button" onclick="location.reload();">重置</button>
						<button id="Link" class="btn btn-primary" type="button" ng-click="selectedItem.type=='json' ? openJSON(selectedItem.value) : openURLs(selectedItem.value);">链接</button>
						<button id="Render" class="btn btn-primary" type="button" style="display: none;" ng-click="aframe_init();">渲染</button>
						<button id="Load" class="btn btn-primary" type="button" style="display: none;" ng-click="initial();">加载</button>
						<button id="Play" class="btn btn-primary" style="display: none;" ng-click="play_all();">播放</button>
						<button id="Pause" class="btn btn-primary" style="display: none;" ng-click="pause_all();">暂停</button>
						<div id="option" style="display: none;">
							<div class="options-item-title">ABR 策略</div>
							<div class="options-item-body">
								<div class="sub-options-item-body">
									<label data-toggle="tooltip" data-placement="right">
										<input id="FOVRule" type="radio" autocomplete="off" checked="checked" ng-click="changeABRStrategy('FOVRule')">
										基于视口的ABR策略
									</label>
									<label data-toggle="tooltip" data-placement="right">
										<input id="HighestBitrateRule" type="radio"  autocomplete="off" ng-click="changeABRStrategy('HighestBitrateRule')">
										全高清的ABR策略
									</label>
								</div>
							</div>
						</div>
					</span>
				</div>
			</div>

			<div class="row">
<!--视频主体部分-->
				<div id="videoContainer=" style="background-color:#3a3d42;width:1030px; height:530px;float:left;">
					<iframe frameborder="0" scrolling="no" id="frame" onload="this.width=1000; this.height=500"></iframe>
				</div>


				<div class="tabs-section" style="width:calc(100% - 1050px);float:left;margin-left:20px;">
					<!-- Tab panes -->
					<div class="tab-content">
							<div class="panel-body panel-stats" ng-cloak>
								<!-- VIDEO STATS ITEMS-->
								<div class="text-success">
									<label class="text-info" data-toggle="tooltip" data-placement="top">播放时间 : </label> {{normalizedTime.toFixed(2)}} s
								</div>

								<!-- <div class="text-success">
									<label class="text-info" data-toggle="tooltip" data-placement="top">瞬时吞吐量 : </label>
									{{totalThroughput >= 1000 ? (totalThroughput / 1000).toFixed(2) : (totalThroughput / 1).toFixed(0)}} {{totalThroughput >= 1000 ? " Mbps" : " kbps"}}
									{{totalThroughput >= 8000000 ? (totalThroughput / 8000000).toFixed(2) : (totalThroughput / 8000).toFixed(0)}} {{totalThroughput >= 8000000 ? " MB/s" : " kB/s"}}
								</div> -->

								<div class="text-success">
									<label class="text-info" data-toggle="tooltip" data-placement="top">瞬时QoE : </label> {{totalQOE.toFixed(2)}}
								</div>
								<div class="text-success">
									<label class="text-info" data-toggle="tooltip" data-placement="top">平均QoE : </label> {{totalQOE_video.toFixed(2)}}
								</div>
								<div class="text-success">
									<label class="text-info" data-toggle="tooltip" data-placement="top">基于视野的QoE : </label> {{viewerQOE.toFixed(2)}}
								</div>
								<div class="text-success">
									<label class="text-info" data-toggle="tooltip" data-placement="top">基于内容的QoE : </label> {{contentQOE.toFixed(2)}}
								</div>
								<div class="text-success">
									<label class="text-info" data-toggle="tooltip" data-placement="top">卡顿次数 : </label> {{pause_total}}
								</div>
								<div class="text-success">
									<label class="text-info" data-toggle="tooltip" data-placement="top">卡顿总时长 : </label> {{rebuffer_time.toFixed(2)}} s
								</div>
								<!-- <div class="text-success"> -->
									<!-- <input id="videoDroppedFramesCB" type="checkbox" -->
											<!-- ng-model="chartState.video.droppedFPS.selected" -->
											<!-- ng-change="enableChartByName('droppedFPS', 'video')"> -->
									<!-- <label class="text-info" for="videoDroppedFramesCB" data-toggle="tooltip" -->
											<!-- data-placement="top" -->
											<!-- title="The absolute count of frames dropped by the rendering pipeline since play commenced">Dropped -->
										<!-- Frames :</label> {{videoDroppedFrames}} -->
								<!-- </div> -->
						</div>
					</div>
				</div>
				<div class="tabs-section" style="border-radius:2px; width:calc(100% - 1050px);float:left;margin-left: 20px;margin-top: 10px">
					<div ng-if="playerCount>7" style="margin-top:20px;text-align: center;font-family: 'Comic Sans MS';font-size: 20px;color: darkslategray">
						当前启用的视频/音频播放器<br/>数量为{{playerCount}}<br/><br/>
						暂不显示所有分片信息
					</div>
					<div ng-if="playerCount<=7">
					<table class="table table-striped" style="border: 3px solid #136bfb;padding-left: 5px;padding-right: 5px;text-align: center;">
						<thhead><tr>
							<th style="text-align: center;">分块0</th>
							<th style="text-align: center;">分块1</th>
							<th style="text-align: center;">分块2</th>
						</tr></thhead>
						<tbody>
						<tr>
							<td><canvas id="capture_0" ng-style="mycanvas"></canvas></td>
							<td><canvas id="capture_1" ng-style="mycanvas"></canvas></td>
							<td><canvas id="capture_2" ng-style="mycanvas"></canvas></td>
						</tr>

						</tbody>
						<thhead><tr>
							<th style="text-align: center;">分块3</th>
							<th style="text-align: center;">分块4</th>
							<th style="text-align: center;">分块5</th>
						</tr></thhead>
						<tbody>
						<tr>
							<td><canvas id="capture_3" ng-style="mycanvas"></canvas></td>
							<td><canvas id="capture_4" ng-style="mycanvas"></canvas></td>
							<td><canvas id="capture_5" ng-style="mycanvas"></canvas></td>

						</tr>
						</tbody>
					</table>
					</div>
				</div>
			</div>

			<div class="row" style="background-color: #ffffff">
				<div id="statstable" class="table-striped" style="margin: 15px;">

					<table class="table table-striped" style="border: 3px solid #136bfb;padding-left: 5px;padding-right: 5px;text-align: center;">
						<thead>
						<tr>
							<th style="text-align: center;">分块ID</th>
							<th style="text-align: center;">缓冲区长度</th>
							<!-- <th style="text-align: center;">平均吞吐量</th> -->
							<th style="text-align: center;">时间线</th>
							<th style="text-align: center;">码率</th>
							<th style="text-align: center;">视野评分</th>
							<th style="text-align: center;">内容评分</th>
							<th style="text-align: center;">总加载时长</th>
							<th style="text-align: center;">同步状态</th>
						</tr>
						</thead>
						<tbody>
						<tr ng-repeat="item in stats">
							<td>{{item.playerid}}</td>
							<td>{{item.bufferlevel}}</td>
							<!-- <td>{{item.throughput}}</td> -->
							<td>{{item.time}}</td>
							<td>{{item.quality}}</td>
							<td>{{item.fovscore}}</td>
							<td>{{item.playerContentScore}}</td>
							<td>{{item.totaltime}}</td>
							<td>{{item.playerCatchUp}}</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>

			<!-- CHARTING -->
			<div class="chart-panel">

				<div class="chart-controls" style="height: 50px;">
					<div>
						<button id="disable-chart-btn" class="btn btn-danger active" ng-click="clearChartData_quality()" ng-cloak>清除
						</button>
						<span style="margin-left: 20px">
							<button id="download-btn" class="btn btn-info active" ng-click="downloadRecord()" ng-cloak>下载
						</button>
						</span>
<!--仅仅为了做前后端交互的测试 去掉无影响-->
<!--						<span style="margin-left: 20px">-->
<!--							<button id="testAxios-btn" class="btn btn-info active"  disabled="true" onclick="refreshCache()" ng-cloak>更新缓存-->
<!--						</button>-->
<!--						</span>-->
						<span style="margin-left: 20px">
							<button  class="btn btn-info active"  ng-click="computeTotalDelay()" ng-cloak>获取时延
						</button>
						</span>
					</div>

					<div id="legend-wrapper" class="legend-row" ng-if="playerCount<=7">
					</div>
				</div>

				<div id="chart-wrapper" >
					<div ng-if="playerCount<=7">
					<span style="text-align:center;display:block;color: whitesmoke;font-size: 18px">视频质量</span>
					<div class="chart-inventory">
						<flot dataset="chartData_quality" options="chartOptions"></flot>
					</div>
					<span style="margin-top:20px;text-align:center;display:block;color: whitesmoke;font-size: 18px">视频缓冲区长度</span>
					<div class="chart-inventory">
						<flot dataset="chartData_buffer" options="chartOptions"></flot>
					</div>
					<!-- <span style="text-align:center;display:block;">视频吞吐量</span>
					<div class="chart-inventory">
						<flot dataset="chartData_throughput" options="chartOptions"></flot>
					</div> -->
					</div>

					<div ng-if="playerCount>7" style="font-family: 'Comic Sans MS';
														font-size: 20px;
														text-align: center;
														color: #191919;
						 								margin-bottom: 20px;"
														>
						当前启用的视播放器数量为{{playerCount}},暂不绘制所有信息.<br/><br/>
						下载功能依然开放 :)
					</div>
				</div>
			</div>
		</div>


	<div class="updateCache" style="margin: 50px 20px ;
									font-size: 20px;
									font-family: 'Comic Sans MS';
									text-align: center;
									border-radius: 10px;
									border:#788abe solid 3px"
									>
		<div style="margin-bottom: 30px;">
			<h3 style="letter-spacing: 1px">缓存更新模块</h3>
		</div>

		<div style="margin-bottom: 20px">
		请输入要更新的缓存json：<input  style="outline-style: none ;
    									   	border: 2px solid #9f1010;
    										border-radius: 10px;"
							  id="cacheInp" value="cache_skiing.json"/>
		<span>
			<button id="cacheBtn"
					class="btn btn-info active"
					style="width: 150px;height: 40px;font-size: 18px;border-radius: 5px" onclick="refreshCache()" ng-cloak>
				Update Cache
			</button>
		</span>
		</div>
	</div>


	</body>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="updateCache/updateCache.js"></script>
<script>
	//确保服务器已经开启 否则报错
	// xhr.js:210 GET http://localhost:7001/fakeApi net::ERR_CONNECTION_REFUSED
// function testAxios(){
// 	axios.get('http://localhost:7001/fakeApi').then(res=>{
// 		console.log(res)
// 	}).catch(e=>{
// 		console.log(e);
// 	})
// }

	//
</script>

</html>
